import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import LayoutStyle from './contentLayout.scss';
import Loading from './Loading';

class ContentLayout extends Component {
    static propTypes = {
        navTitle: PropTypes.string,
        children: PropTypes.node,
        loading: PropTypes.bool,
        waitForAnimate: PropTypes.bool
    };
    static defaultProps = {
        waitForAnimate: false
    };
    render() {
        const { loading, waitForAnimate } = this.props;
        return (
            <div className={LayoutStyle['content-layout']}>
                <div className={LayoutStyle.breadcrumb}><Link to="/">首页</Link>{this.props.navTitle && <span>-{this.props.navTitle}</span>}</div>
                <Loading loading={loading} waitForAnimate={waitForAnimate}>
                    <div className={LayoutStyle['content-center']}>
                        {this.props.children}
                    </div>
                </Loading>
            </div>
        );
    }
}

export default ContentLayout;